<template>
    <div>
        <div class="navBar">
            <div
                 :class="[navItem activeId === 1?'navActive':'']"
                 @click="changeNav(1)">
                未读消息
                <span>{{$store.getters.unreadNum}}</span>
            </div>
            <div :class="['navItem',activeId === 2?'navActive':'']"
                 @click="changeNav(2)">
                已读消息
                <span>{{$store.getters.readNum}}</span>
            </div>
            <div :class="['navItem',activeId === 3?'navActive':'']"
                 @click="changeNav(3)">
                回收站
                <span>{{$store.getters.deleteNum}}</span>
            </div>
        </div>
        <div class="content">
            <div v-show="1 === activeId">
                <div class="listItem" v-for="(item, index) of unreadBox">
                    <span>{{item.id + " : " + item.text}}</span>
                    <button @click="checkRead(index)" class="rightBtn">标记为已读</button>
                </div>
                <button v-show="unreadBox.length"  @click="allRead" class="rightBtn">全部标记为已读</button>
            </div>
            <div v-show="2 === activeId">
                <div class="listItem" v-for="(item, index) of readBox">
                    <span>{{item.id + " : " + item.text}}</span>
                    <button @click="checkDelete(index)" class="rightBtn">删除</button>
                    <button @click="checkUnread(index)" class="rightBtn">标记为未读</button>
                </div>
                <button v-show="readBox.length" @click="allDelete" class="rightBtn">全部删除</button>
            </div>
            <div v-show="3 === activeId">
                <div class="listItem" v-for="(item, index) of deleteBox">
                    <span>{{item.id + " : " + item.text}}</span>
                    <button @click="checkBack(index)" class="rightBtn">还原</button>
                </div>
                <button v-show="deleteBox.length" @click="allUnread" class="rightBtn">全部还原</button>
            </div>
        </div>

    </div>
</template>

<script>
    import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
    export default {


        data() {
            return {
                activeId: 1,
            };
        },

        computed: {
            ...mapState([
                "unreadBox",
                "readBox",
                "deleteBox"
            ])
        },

        created() {
            this.$http.get("data.json").then(({data: res})=>{
                console.log(res);
                this.setData(res)
            })
        },

        methods: {
            /*async getData(){
                let { data:res } = await this.$http.get("data.json");
                this.setData(res)
            },*/
            changeNav(id){
                this.activeId = id
            },
            ...mapMutations([
                "setData",
                "checkRead",
                "checkDelete",
                "checkUnread",
                "checkBack",
                "allRead",
                "allDelete",
                "allUnread"
            ]),
            /*checkRead(itemId){
                this.$store.commit("checkRead", itemId)
            },
            checkDelete(itemId){
                this.$store.commit("checkDelete", itemId)
            },
            checkUnread(itemId){
                this.$store.commit("checkUnread", itemId)
            },
            checkBack(itemId){
                this.$store.commit("checkBack", itemId)
            },
            allRead(){
                this.$store.commit("allRead")
            },
            allDelete(){
                this.$store.commit("allDelete")
            },
            allUnread(){
                this.$store.commit("allUnread")
            },*/
        },

    };
</script>

<style scoped>
    .navBar {
        margin: 50px auto 0;
        border: 1px solid #000;
        width: 480px;
        height: 50px;
        user-select: none;
    }

    .navItem {
        float: left;
        width: 160px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        cursor: pointer;
    }

    .navActive {
        background: #000;
        color: #fff;
    }

    .content{
        margin: 0 auto;
        border: 1px solid #000;
        width: 480px;
        height: 500px;
    }
    .listItem{
        display: block;
        margin-left: 20px;
        height: 40px;
        line-height: 40px;
    }
    .rightBtn{
        float: right;
        margin-top: 5px;
        margin-right: 20px;
        height: 30px;
        line-height: 30px;
    }
</style>
